<template>
  <view class="popup-overlay">
    <view class="popup-content">
      <text>{{ t("mine.rech") }}</text>
      <input
        type="number"
        :placeholder="t('mine.tips')"
        class="input"
        v-model="toup"
        placeholder-style="
          height: 22rpx;
          font-size: 20rpx;
          font-family: Arial, Arial;
          font-weight: 400;
          color: rgba(255,255,255,0.5);
          line-height: 23rpx;
          text-align: left;
          padding-left: 10px; /* 根据需要调整左边距 */"
      />
      <view class="unit">
        <view class="line"></view>
        <view class="txt">USDT</view>
      </view>
      <view class="btn">
        <view
          class="Ok"
          :loading="loading"
          :disabled="loading"
          @click="toups"
          >{{ t("mine.ok") }}</view
        >
      </view>
    </view>
    <!-- 成功弹窗 -->
    <Popup :title="t('mine.msg')" ref="popup" />
  </view>
</template>
<script setup>
import { useUserStore } from "../../store/index";
import api from "../../networks/apis";
import { ref, toRaw, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import { transferToken, switchNetwork } from "@/networks/web3/bsc.js";
import { showSuccessToast, showFailToast, showToast } from "vant";
import { onShow } from "@dcloudio/uni-app";
const useStore = useUserStore();
const { t } = useI18n();
//用ref调用弹窗子组件的方法
const popup = ref();
const loading = ref(false); //按钮禁用
//web3充值
const toup = ref();
const abis = ref({
  abi: "",
  address: "",
});
const decimals = ref(0);
const networkData = ref({
  chainId: "",
  chainName: "",
  rpcUrls: [],
  blockExplorerUrls: [],
  nativeCurrency: {
    symbol: "ETH",
    decimals: 18,
  },
});
const receiving = ref(""); //收款地址
const orderid = ref(""); //订单号
const has = ref(""); //hash

onShow(async () => {
  nextTick(async () => {
    getChainsInfo();
  });
});

//充值
const toups = async () => {
  if (!toup.value) {
    uni.showToast({
      title: "Please enter the recharge amount",
      icon: "none",
    });
    return;
  }
  loading.value = true;
  const res = await api.recharge(toup.value);
  loading.value = false;
  if (res.code == 0) {
    orderid.value = res.data.transaction_no;
    uni.showLoading({
      title: "Loading",
      mask: true,
    });
    console.log({
      a: abis.value,
      b: receiving.value,
      c: toup.value,
      d: decimals.value,
    });
    transferToken(
      toRaw(abis.value),
      toRaw(receiving.value),
      +toRaw(toup.value),
      toRaw(decimals.value)
    )
      .then(async (res) => {
        has.value = res;
        toup.value = "";
        await voucher();
        uni.hideLoading({});
        const { data } = await api.userAssets();
        assets.value = data;
        const a = await api.userInfo();
        useStore.setuserInfo(a.data);
      })
      .catch((err) => {
        uni.hideLoading({});
        showFailToast("User cancel payment");
        // console.log("err", err);
        toup.value = "";
      });
  } else {
    showFailToast("Recharge failure");
    toup.value = "";
  }
};
//充值回调
const voucher = async () => {
  let account = 0;
  api
    .paymentVoucher({ transaction_no: orderid.value, hash: has.value })
    .then((res) => {
      if (res.code == 0) {
        onShowPopup();
        // userinfo();
      } else {
        if (account < 10) {
          account++;
          return setTimeout(voucher, 2000);
        }
        throw new Error(res.msg);
      }
    })
    .catch((err) => {
      if (account < 10) {
        account++;
        return setTimeout(voucher, 2000);
      }
      showFailToast("Recharge failure");
      console.log("err==", err);
    });
};
//获取信息配置
const getConfigInfo = () => {
  api.chains().then((res) => {
    if (res.code == 0) {
      console.log(res);
      abis.value.abi = res.data.api;
      abis.value.address = res.data.address;
      receiving.value = res.data.receiving_address;
      decimals.value = res.data.decimals;
    }
  });
};
getConfigInfo();

//获取链的信息
const getChainsInfo = () => {
  api.chains().then((res) => {
    if (res.code == 0) {
      console.log(res.data, "链信息");
      networkData.value.chainId = res.data.chain_id;
      networkData.value.chainName = res.data.name;
      networkData.value.rpcUrls = res.data.rpc_url;
      networkData.value.blockExplorerUrls = res.data.scan_url;
      // networkData.value.nativeCurrency = res.data.nativeCurrency
      if (window.ethereum.chainId != networkData.value.chainId) {
        setNetwork();
      }
    }
  });
};
//切换网络
const setNetwork = () => {
  console.log(networkData.value);
  switchNetwork(toRaw(networkData.value))
    .then((res) => {
      // showToast('Network connection successful');
      console.log("切换网络", res);
    })
    .catch((err) => {
      showToast("Network connection failure");
      console.log("err==", err);
    });
};
//点击确定
const onShowPopup = () => {
  console.log("-----充值操作-----");
  popup.value.showPopup(); // 调用`showPopup`方法
};
</script>

<style lang="scss" scoped>
.fee {
  position: absolute;
  /* transform: translate(100%, 50%); */
  bottom: 3%;
  right: 5%;
  height: 28rpx;
  font-size: 20rpx;
  font-family: Arial, Arial;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.3);
  line-height: 23rpx;
  display: flex;

  .img {
    width: 28rpx;
    height: 28rpx;
  }
}

.recharge {
  //   width: 750rpx;
  //   height: 1624rpx;
  padding: 25rpx 0;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .Navbar {
    width: 100%;
    height: 110rpx;
    display: flex;
    align-items: center;
    padding: 70rpx 30rpx 2rpx 30rpx;
    background: transparent;
    justify-content: space-between;

    .img {
      width: 40rpx;
      height: 40rpx;
    }

    .tittle {
      width: 280rpx;
      height: 32rpx;
      font-size: 28rpx;
      /* margin-left: 178rpx; */
      font-family: Arial, Arial;
      font-weight: bold;
      color: #ffffff;
      line-height: 33rpx;
      text-align: center;
      padding-left: 90rpx;
    }

    .text {
      width: 200rpx;
      height: 72rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 400;
      color: #ffffff;
      line-height: 72rpx;
      background-image: url("/static/Withdrawal/Rectangle 1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      margin: 0;
    }
  }

  .title {
    width: 528rpx;
    height: 46rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 38rpx;
    margin: 112rpx 112rpx 52rpx 105rpx;
  }

  .type {
    width: 690rpx;
    height: 168rpx;
    background-image: url("/static/Withdrawal/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 26rpx;
    position: relative;

    text {
      font-size: 22rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 26rpx;
    }

    .bottom {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 47rpx;

      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 18rpx;
      }

      text {
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: #ffffff;
        line-height: 33rpx;
        margin-left: 18rpx;
      }
    }
  }

  .middle {
    width: 690rpx;
    height: 168rpx;
    background-image: url("/static/Withdrawal/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 40rpx auto;
    padding-top: 32rpx;

    text {
      display: block;
      width: 642rpx;
      margin: 0 auto;
      font-size: 22rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 26rpx;
    }

    .inside {
      width: 642rpx;
      height: 72rpx;
      background-image: url("/static/Withdrawal/Rectangle 35.png");
      background-size: cover;
      background-repeat: no-repeat;
      margin: 20rpx auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin: 0 20rpx;
        }

        .line {
          width: 2rpx;
          height: 38rpx;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .line {
          margin-right: 20rpx;
          width: 2rpx;
          height: 38rpx;
        }

        .all {
          font-size: 32rpx;
          font-family: Arial, Arial;
          font-weight: 900;
          color: #ffffff;
          line-height: 38rpx;
          margin-right: 14rpx;
        }
      }
    }
  }

  .text {
    display: block;
    width: 582rpx;
    height: 22rpx;
    font-size: 20rpx;
    font-family: Arial, Arial;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    line-height: 23rpx;
    text-align: center;
    margin: 44rpx auto 76rpx;
  }

  .button {
    width: 526rpx;
    height: 112rpx;
    background-image: url("/static/Withdrawal/Rectangle 62.png");
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 112rpx;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
.popup-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 125rpx;
}

.popup-content {
  width: 688rpx;
  height: 380rpx;
  background-image: url("/static/recharge/Rectangle 36.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;

  text {
    width: 146rpx;
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #00d084;
    line-height: 38rpx;
    display: block;
    margin: 30rpx auto;
  }

  .input {
    width: 628rpx;
    height: 94rpx;
    background-image: url("/static/recharge/Rectangle 75.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #fff;
    position: relative;
  }

  .unit {
    position: absolute;
    display: flex;
    transform: translate(580%, -160%);

    .line {
      width: 2rpx;
      height: 38rpx;
      background: #929191;
    }

    .txt {
      margin-left: 5rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 40rpx;
    }
  }

  .btn {
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 38rpx;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50rpx;

    .Cancel {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url("/static/recharge/Rectangle 76.png");
      background-size: cover;
      background-repeat: no-repeat;
    }

    .Ok {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url("/static/recharge/Rectangle 62.png");
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
